<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>首页，欢迎租车</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.2/css/layui.css"/>
</head>
<style>
    .layui-body {
        margin-top: 60px;
        position: initial !important;

    }

    .center-context {
        background: #f2f2f2;
    }

    .call-board > a {
        height: 25px;
        padding-left: 5px;
    }

    .layui-footer {
        left: 0 !important;
        text-align: center;
    }
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">汽车租赁</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="/main">首页</a></li>
      <li class="layui-nav-item"><a th:href="'/main/type?carTypeId='+${types.get(0).id}">车辆分类</a></li>
      <li class="layui-nav-item layui-this"><a href="#">公告</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li th:if="not ${session.customerId}" class="layui-nav-item"><a id="login" href="/customerLogin">登录</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><img src="/default.jpg" class="layui-nav-img"></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><span th:text="${session.customer.username}"></span></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a href="/myOrder">我的订单</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a href="/customerInfo">个人中心</a></li>
      <li th:if="${session.customerId}" class="layui-nav-item"><a id="exit" href="/customer/exit">退出</a></li>
    </ul>
  </div>

  <div class="layui-body layui-container">
    <div class="layui-container" style="padding: 15px;">
      <div class="layui-row  layui-col-space10">
        <div class="layui-col-md2">
          <div style="text-align: center;background: #a3b9c3;font-size: 20px;" >汽车分类</div>
          <div class="layui-panel">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
              <li th:each="type:${types}" class="layui-nav-item layui-nav-itemed" style="height: 50px;">
                <div class="layui-menu-body-title">
                  <a th:href="'/main/type?carTypeId='+${type.id}" th:text="${type.name}"></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="layui-col-md8 center-context">
          <h1 style="text-align: center">[[${notice.title}]]</h1>
          <div class="layui-panel">
            <div style="padding: 30px;">
              <p style="font-weight: bold">[[${notice.context}]]</p>
              <br><br>
              <img th:src="@{/style/1.jpg}" style="width: 700px;height: 400px">
              <br><br>
              <p style="font-weight: bold">外观部分：

                前脸最大的外观变化为双飞翼LED日间行车灯为全系标配，这一点不错，精英版带有光线感应自动功能。前脸的变化也是直接套用插电混合车型的前杠设计，并无特别设计新颖之处，总之就是大众套娃的一贯风格。新款大众帕萨特依旧有四种车漆颜色可以选择，分别为玄武黑，雅致白，珠光银，香槟金。</p>
              <br><br>
              <img th:src="@{/style/2.jpg}" style="width: 700px;height: 400px">
              <br><br>
              <p style="font-weight: bold">新款大众帕萨特尺寸分别为4933*1836*1469mm，轴距为2871mm。全LED尾灯和现款没有什么区别，280TSI精英版不带流光转向功能，后尾部分由一体式尾部镀铬装饰。这个配置为17寸铝合金轮毂</p>
              <br><br>
              <img th:src="@{/style/3.jpg}" style="width: 700px;height: 400px">
            </div>
          </div>
        </div>
        <div class="layui-col-md2">
          <div style="text-align: center;background: #a3b9c3;font-size: 20px;" >公告</div>
          <div class="layui-panel call-board layui-nav layui-bg-cyan">
            <div th:each="notice:${notices}" style="margin-bottom: 10px;"><a th:href="'/main/notice/'+${notice.id}" style="color: #ffffffbd;">[[${notice.title}]]</a></div>
            <div style="text-align: center" th:if="${notices.size() eq 0}"> 暂无</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<script src="https://www.layuicdn.com/layui-v2.6.2/layui.js"></script>
<script>
  layui.use('carousel', function () {
    const carousel = layui.carousel;
    //图片轮播
    carousel.render({
      elem: '#test10'
      , width: '750px'
      , height: '440px'
      , interval: 5000
    });

  })
</script>
</body>
</html>
